<template>
  <div>
    <el-dialog :width="changeRem(width)" :title="title" :visible.sync="visible" append-to-body>
      <el-input
        :validate-event="false"
        placeholder="请输入关键字"
        v-model="keyword" @keyup.enter.native="search">
        <i slot="suffix" class="el-input__icon el-icon-search cursor" @click="search"></i>
      </el-input>
     <div class="option-box" v-loading="loading">
       <el-scrollbar>
         <ul class="drawing-list-wrap" v-if="!multiple">
           <li class="list-item" :class="setClass(item)" v-for="(item, index) in dataList" @click="picker(item)" :key="index">
               {{ getName(item) }}
           </li>
         </ul>
        <div class="drawing-list-wrap"  v-else>
          <el-checkbox-group v-model="checkedValues">
            <el-checkbox v-for="(item, index) in dataList" :label="item" :key="index">
              {{ getName(item) }}
            </el-checkbox>
          </el-checkbox-group>
        </div>
       </el-scrollbar>
     </div>
      <div slot="footer" class="dialog-footer clearfix" style="text-align: right">
          <span class="btn-box" style="text-align: right;display: flex" v-if="total">
           <el-pagination
             :current-page.sync="currentPage"
             :page-size="params[paramsMap.pageSize]"
             layout="prev, pager, next, jumper"
             style="margin-right: 20px"
             :total="total">
            </el-pagination>
             <el-button @click="visible = false" size="small">取 消</el-button>
             <el-button type="primary" size="small" @click="confirm">确 定</el-button>
          </span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import BaseRequestComponent from "../../BaseRequestComponent";

export default {
  name: 'searchBox',
  extends:BaseRequestComponent,
  props: {
    visibleValue: {
      required: true,
      type: Boolean
    },
    width: {
      default: '750px'
    },
    url: {
      required: true,
      type: String
    },
    params: Object, // 请求参数
    paramsMap: {
      type: Object,
      default: () => ({
        pageNum: 'pageNum',
        pageSize: 'pageSize'
      })
    },
    title: {
      default: '搜索'
    },
    searchKey: { // 查询请求的key
      default: 'nameOrNumber'
    },
    props: {
      type: Object,
      default: () => ({
        label: 'label',
        value: 'value'
      })
    },
    multiple: {
      type: Boolean,
      default: () => false
    }, // 是否多选
    pathPage: Boolean, // 分页参数是否在url上 格式：url/pageSize/page,
    labelFields: Array // 下拉选项显示字段
  },
  data() {
    return {
      keyword: '',
      visible: false,
      dataList: [],
      activeItem: {},
      checkedValues: [],
      currentPage: 1,
      total: 0,
      loading: false,
    }
  },
 /* created() {
    if (this.url) {
      this.search()
    }
  },*/
  methods: {
    search (url = this.url) {
      const param = this.params || {}
      param[this.searchKey] = this.keyword
      this.loading = true
      this.getDict(url,param,this.$attrs.method || 'get')
      .then(res => {
        let status = eval(`res.${this.getDictResultMap.status}`)
        let data = eval(`res.${this.getDictResultMap.data}`)
        let total = eval(`res.${this.getDictResultMap.total}`)
        let list = eval(`res.${this.getDictResultMap.list}`)
        if (status === this.getDictSuccessStatus){
          if (data && list && list instanceof Array) {
            this.dataList = list || []
            this.total = total || 0
          } else if (data instanceof Array && data.length) {
            this.dataList = data || []
          }
        }
      }).finally(() => {
        this.loading = false
      })
    },
    picker (item) {
      this.activeItem = item
      this.confirm()
    },
    confirm() {
      if (!this.multiple) {
        this.$emit('change',this.activeItem[this.props.value])
        this.$emit('input',this.activeItem[this.props.value])
        this.$emit('dataChange',this.activeItem)
      } else {
        const values = this.checkedValues.map(i => i[this.props.value])
        this.$emit('change',values)
        // this.$emit('input',values)
        this.$emit('multipleDataChange',this.checkedValues)
      }
      this.visible = false
    },
    // 显示的内容
    getName (item) {
      if (this.labelFields.length) {
        return this.labelFields.map(i => item[i]).join(" ")
      } else {
        return item[this.props.number]?item[this.props.label]+item[this.props.number]:item[this.props.label]
      }
    },
    setClass(item) {
      if (this.activeItem[this.props.value] === item[this.props.value]) {
        return 'active-item'
      }
      return ''
    },
    changeRem(number) {
      return (parseFloat(number) * Math.min(this.$scale, 1)) + 'px'
    }
  },
  watch: {
    visibleValue: {
      handler (val) {
        if (val !== this.visible) this.visible = val
        if (val && this.url) {
          this.search()
        }
        if (!val && this.multiple) {
          this.checkedValues = []
        }
      },
      immediate: true
    },
    visible (val) {
      if (this.visibleValue !== val) this.$emit('update:visibleValue', val)
    },
    keyword() {
      this.search()
    },
    currentPage(val) {
      this.params[this.paramsMap.pageNum] = val
      this.params[this.paramsMap.pageSize] = val
      if (this.pathPage) {
        const url = this.url.substring(0,this.url.lastIndexOf('/')+1) + val
        this.search(url)
      } else {
        this.search()
      }
    }
  }
}
</script>

<style scoped lang="scss">
  .option-box {
    height: 300px;
  }
  .drawing-list-wrap{
    padding: 0px;
    height: 300px;
    .list-item{
      list-style: none;
      margin: 0;
      cursor: pointer;
      padding: 12px 0 12px 5px;
      transition: all .3s ease-in;
      &:hover{
        background-color: #F5F7FA;
      }
      &:active {
        background-color: #409EFF;
      }
      border-bottom: 1px solid #f4f5f6;
    }
    .active-item {
      color: #409EFF;
    }
    ::v-deep .el-checkbox {
      display: inherit;
      margin: 0;
      padding: 12px 0 12px 5px;
      transition: all .3s ease-in;
    }
  }
  ::v-deep.el-scrollbar__wrap{
    overflow-x: hidden;
  }
  ::v-deep .el-icon-circle-check {
    display: none;
  }
.cursor{
  cursor: pointer;
}
  .dialog-footer {
    width: 100%;
    .page-box {
      float: right;
    }
    .btn-box {
      float: right;
    }
  }
</style>
